
import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { Select, Row, Col } from 'antd'
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from '@common/presentational/CustomizeTable'
import SearchInput from '@common/presentational/SearchInput'
import { getQuery, handleQueryEqual, setQuery } from '@utils/setUrlQuery'
import { priceFenToYuan } from '@utils/priceConversion'
import {
    getCustomerMemberSelection,
    getCustomerList,
    getCustomerSummery,
    getCustomerDetail,
} from '@sagas/customer'

@withRouter
@connect(({ customer }) => ({
    customerMemberSelectionMap: customer.customerMemberSelectionMap,
    customerListMap: customer.customerListMap,
    customerSummery: customer.customerSummery
}), {
    getCustomerMemberSelection,
    getCustomerList,
    getCustomerSummery,
    getCustomerDetail,
})

class CustomerListPage extends PureComponent {
    constructor(props) {
        super(props)
        const { query = '', card_id = '' } = getQuery(props.history)
        this.state = {
            card_id: decodeURIComponent(card_id),
            query: decodeURIComponent(query)
        }

        this.tableRef = React.createRef()
        
        this.handleGetTableInfo = this.handleGetTableInfo.bind(this) // 获取列表信息

        // table
        this.paginationInfo = {}
        this.columns = [{
            key: 'nickname',
            dataIndex: 'nickname',
            title: '客户',
            render: (text, record) => (<>
                <div>{text}</div>
                <div className="ft-clr-ml ft-12">ID:{record.member_id}</div>
            </>),
        }, {
            key: 'mobile',
            dataIndex: 'mobile',
            title: '手机号',
            render: (text, record) => text || '- -',
        }, {
            key: 'card_name',
            dataIndex: 'card_name',
            title: '会员卡',
            render: (text, record) => text || '- -',
        }, {
            key: 'balance',
            dataIndex: 'balance',
            title: '余额',
            width: 100,
            render: (text, record) => record.balance ? `¥${priceFenToYuan(record.balance)}` : '- -',
        }, {
            key: 'integral',
            dataIndex: 'integral',
            title: '积分',
            render: (text, record) => record.integral || '- -',
            width: 100,
        }, {
            key: 'created_at',
            dataIndex: 'created_at',
            title: '注册时间',
        }, {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            width: 100,
            render: (text, record) => {
                return (
                    <div className="flex-vertical-center">
                        <div onClick={this.handleDetail.bind(this, record)} className="ft-hover">详情</div>
                    </div>
                )
            }
        }]
    }

    componentDidMount() {
        this.props.getCustomerSummery()
        this.props.getCustomerMemberSelection()
    }

    _handleSetUrlQuery() {
        const { history } = this.props
        const { query } = this.state
        let params = {
            query,
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    _handleInitTable() {
        this.tableRef.current?.initPage()
    }

    handleGetTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { query } = this.state
        this.props.getCustomerList({
            page_no: current,
            page_size: pageSize,
            search: query,
        })
        this._handleSetUrlQuery()
    }

    handleSearch(key, value) {
        this.setState({
            [key]: value
        }, this._handleInitTable)
    }

    handleDetail(record) {
        const { history, getCustomerDetail } = this.props
        const { member_id } = record
        getCustomerDetail({
            member_id,
        }, res => {
            history.push({
                pathname: `/customer/detail/${member_id}`,
                state: {
                    ...res,
                },
            })
        })
    }

    render() {
        const { customerListMap, customerMemberSelectionMap, customerSummery } = this.props
        const { query, card_id } = this.state
        return (
            <div className="table-scroll-container customer-list-page">
                <div className="flex-vertical-center mgb-24">客户概况</div>
                <Row className="stats-panel" gutter={24}>
                    <Col span={6}>
                        <div className="stats-item bg-f5">
                            <div className="ft-clr-ml mgb-8">累计客户数</div>
                            <div className="ft-clr-d ft-32">{customerSummery.register_total}</div>
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className="stats-item bg-f5">
                            <div className="ft-clr-ml mgb-8">累计领卡会员数</div>
                            <div className="ft-clr-d ft-32">{customerSummery.send_card_total}</div>
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className="stats-item bg-f5">
                            <div className="ft-clr-ml mgb-8">今日新增客户数</div>
                            <div className="ft-clr-d ft-32">{customerSummery.today_register_num}</div>
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className="stats-item bg-f5">
                            <div className="ft-clr-ml mgb-8">今日新增领卡会员数</div>
                            <div className="ft-clr-d ft-32">{customerSummery.today_send_card_num}</div>
                        </div>
                    </Col>
                </Row>
                <div className="table-params page-params flex-row-between mgb-16">
                    <div className="flex-vertical-center">客户查询</div>
                    <div className="flex-vertical-center">
                        <Select className="mgr-16"
                            style={{ width: '140px' }}
                            onChange={this.handleSearch.bind(this, 'card_id')}
                            value={card_id}
                        >
                            <Select.Option key="all" value="">全部</Select.Option>
                            {(customerMemberSelectionMap.cards || []).map(c => <Select.Option key={c.card_id} value={c.card_id}>{c.card_name}</Select.Option>)}
                        </Select>
                        <SearchInput style={{ width: 240 }}
                            onChange={this.handleSearch.bind(this, 'query')}
                            initValue={query}
                            value={query}
                            placeholder="用户昵称、手机号"
                        />
                    </div>
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="customerList" onChange={this.handleGetTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={this.columns}
                            dataSource={customerListMap.members || []}
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={customerListMap.total}
                        />
                    </div>
                </CustomizeTableProvide>
            </div>
        )
    }
}

export default CustomerListPage